<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 2000px;
            background-color: red;
            z-index: 100;
        }
        .c2{
            color: white;
            position: fixed;
            right: 30px;
            bottom: 30px;
            z-index: 101;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body onscroll="f2()">
    <div class="c1">
        <a id="i1" class="c2 hide" onclick="f1()">返回顶部</a>
    </div>
    <script>
        function f1() {
            document.documentElement.scrollTop=0;
        }
        function f2() {
            var t1 = document.getElementById('i1');
            var t2 = document.documentElement.scrollTop;
            if(t2>40){t1.classList.remove('hide')}
            else{t1.classList.add('hide')}
        }
    </script>
</body>
</html>